<template>
    <VueDraggableNext
        style="height: 200px;overflow-y: auto" v-model="props.item.sentenceList" handle=".handle" group="storySentence"
                      @add="onStorySentenceAdd" @change="onStorySentenceChange"
    >
      <n-input-group v-if="option.voiceOption" v-for="(sentence,i) in item.sentenceList"
                     style="margin-top: 5px;">
        <n-popselect
            scrollable
            trigger="click">
          <n-button class="handle" type="primary"  size="small">
            {{ getVoiceLabelName(sentence.audioConfig) }}
          </n-button>
        </n-popselect>

        <n-button
            v-if="props.voiceConfig &&( props.voiceConfig.planType == 'videoVoice' || props.voiceConfig.planType == 'uploadVoice')"
            scrollable
            size="small"
            type="primary"
            trigger="click"
            class="handle">
          拖拽
        </n-button>

        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button type="info"  size="small" >
              <n-icon>
                <ArrowUp/>
              </n-icon>
            </n-button>
          </template>
          向上合并
        </n-tooltip>
        <n-input style="height: 28px;">
        </n-input>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button type="info" size="small">
              <n-icon>
                <ArrowDown/>
              </n-icon>
            </n-button>
          </template>
          往下合并
        </n-tooltip>
        <n-popconfirm  >
          <template #trigger>
            <n-button size="small" type="warning">
              <n-icon>
                <CloseSharp/>
              </n-icon>
            </n-button>
          </template>
          确定删除该句内容吗？
        </n-popconfirm>
      </n-input-group>
    </VueDraggableNext>

</template>
<script setup lang="ts">

  import {VueDraggableNext} from "vue-draggable-next";
  import {onMounted} from "vue";

  const props = defineProps({
    item: {
      type: Object,
      required: true
    },
    option:{
      type:Object,
      required: true
    },
    voiceConfig: {
      type:Object,
      required: true
    },
    onStorySentenceAdd:{
      type: Function,
      required: true
    },
    onStorySentenceChange:{
      type: Function,
      requires: true
    }
  })


  onMounted(()=>{
    console.log(props.item)
    console.log(props.option)
  })

  const getVoiceLabelName = (voiceConfig: any) => {
    const selectItems = props.option.voiceOption.filter((item: any) => {
      return item.value == voiceConfig.voiceName
    });
    if (selectItems.length > 0) {
      return selectItems[0].localName
    } else {
      voiceConfig.voiceName = props.option.voiceOption[0].value
      return props.option.voiceOption[0].localName
    }
  }
</script>

